<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="sideTree">
<head>
    <link rel="stylesheet" th:href="@{lib/ztree/css/custom.css}"/>
    <link rel="stylesheet" th:href="@{lib/ztree/css/zTreeStyle/zTreeStyle.css}"/>
    <style type="text/css">
        div#rMenu {
            position: absolute;
            visibility: hidden;
            top: 0;
            text-align: left;
            padding: 4px;
        }

        div#rMenu a {
            padding: 0px 15px 3px 15px;
            background-color: #cad4e6;
            vertical-align: middle;
        }

        div#aMenu {
            position: absolute;
            visibility: hidden;
            top: 0;
            text-align: left;
            padding: 4px;
        }

        div#aMenu a {
            padding: 0px 15px 3px 15px;
            background-color: #cad4e6;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="tree-area">
    <ul id="sideTree" class="ztree"></ul>

</div>
<div id="rMenu">

    <!--<a id="m_edit" href="#" class="list-group-item" onclick="update();">下载</a>-->
    <a id="m_delete" href="#" class="list-group-item" onclick="deleteMedia();">删除</a>
</div>
<div id="aMenu">
    <a id="m_add" href="#" class="list-group-item" onclick="add();">添加</a>
</div>
<input type="hidden" id="currentApplNo" th:value="${applNo}"/>
</body>

<script th:src="@{lib/ztree/js/jquery.ztree.core.js}"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    //单击节点 显示节点
    var rMenu;//右键菜单元素
    /*]]>*/

    /*<![CDATA[*/
    var setting = {
        async: {
            enable: true,//异步加载
            // url : "${ctx}/main/getMenuTreeData.do", //调用请求
            autoParam: ["id", "pid"] //自动封装参数
        },
        view: {
            dblClickExpand: true,
            showLine: true,
            selectedMulti: false
        },
        callback: {
            beforeClick: function (treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("sideTree");
                if (treeNode.isParent) {
                    $("#currentUploadDir").val(treeNode.uri);
                } else {
                    treeNodeClick(treeNode.uri, treeNode.uriDisp);
                    return true;
                }
            },
            onRightClick: OnRightClick
        }

    };
    $(document).ready(function () {
        $.fn.zTree.init($("#sideTree"), setting, [[${treeJson}]]);
    });
    function zTreeBeforeRightClick(treeId, treeNode) {
        return false;
    };

    var treeNodeClick = function (uri, uriDisp) {
        $.ajax({
            url: '/oss/getMedia',
            type: 'POST',
            async: true,
            data: {
                uri: uri,
                uriDisp: uriDisp
            },
            dataType: 'html',
            success: function (data) {
                $("#right-content").html(data);
            }
        });

    }

    var nodes = null;
    function OnRightClick(event, treeId, treeNode) {
        nodes = treeNode;

        if (treeNode) {

            if (treeNode.level == 3) {
                showRMenu("child", event.clientX, event.clientY);
            } else if (treeNode.level == 2) {
                showRMenu("childAndPar", event.clientX, event.clientY);
            } else {
                showRMenu("parent", event.clientX, event.clientY)
            }
            showRMenu()
        }
    }
    function showRMenu(type, x, y) {

        $("#sideTree ul").show();
        if (type == "parent") {

            $("#rMenu").hide();

        } else if (type == "child") {
            $("#rMenu").show();
            $("#rMenu").css({
                "top": y + "px",
                "left": x + "px",
                "visibility": "visible"
            });
        } else if (type == "childAndPar") {
            $("#aMenu").show();
            $("#aMenu").css({
                "top": y + "px",
                "left": x + "px",
                "visibility": "visible"
            });

        }
        $(document).bind("mousedown", onBodyMouseDown)
    }
    function onBodyMouseDown(event) {
        if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
            $("#rMenu").hide();
        }
        if (!(event.target.id == "aMenu" || $(event.target).parents("#aMenu").length > 0)) {
            $("#aMenu").hide();
        }
    }

    function deleteMedia() {
        $.ajax({
            url: '/mgr/deleteMedia',
            type: 'POST',
            dataType: 'json',
            data: {
                id: nodes.id
            },

            success: function (data) {
                if (data.success == true) {
                    alert("删除成功");
                    location.reload();
                } else {
                    alert("删除失败");
                    location.reload();
                }
            }
        });

    }

    function add() {
        if (check()) {
            $.ajax({
                url: '/mgr/getMediaMgr',
                type: 'POST',
                async: true,
                data: {
                    currentUploadDir: nodes.uri,
                    currentUploadDirDesc: nodes.uriDisp
                },
                dataType: 'html',
                success: function (data) {
                    $("#right-content").html(data);
                }
            });
        }

    }
    function check() {
        var currentApplNo = $("#currentApplNo").val();
        if (currentApplNo == "") {
            alert("请查询订单后再上传文件。");
            return false;
        }

        var currentUploadDir = $("#currentUploadDir").val();
        if (currentUploadDir == "") {
            alert("请选择文件夹后再上传文件。");
            return false;
        }
        return true;
    };
    /*]]>*/
</script>
</html>